//index.js
//获取应用实例
import ef from "../../easy-canvas.min.js";
const app = getApp();

Page({
  data: {
    motto: "Hello World",
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse("button.open-type.getUserInfo"),
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: "../logs/logs",
    });
  },
  onLoad: function () {
    const query = wx.createSelectorQuery();
    query
      .select("#myCanvas")
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext("2d");

        const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        // ctx.scale(dpr, dpr)
        const containerWidth = 420;
        const containerHeight = 336;

        const image1 = canvas.createImage();
        const image2 = canvas.createImage();
        image1.onload = function () {
          console.log("image1 onload");
        };
        image2.onload = function () {
          console.log("image2 onload");
        };

        this.layer = ef.createLayer(ctx, {
          dpr,
          width: containerWidth,
          height: containerHeight,
          canvas,
        });
        const node = ef.createElement((c) => {
          return c("view", {}, [
            c(
              "view",
              {
                styles: {
                  backgroundColor: "rgba(116, 97, 255, 0.1)",
                  width: containerWidth,
                  height: containerHeight,
                  padding: [20, 16],
                  borderWidth: 1,
                  borderColor: "rgba(116, 97, 255, 0.11)",
                  borderRadius: 8,
                },
                on: {
                  click(e) {
                    wx.showToast({
                      title: "点击查看",
                    });
                  },
                },
                attrs: {
                  id: "root",
                },
              },
              [
                c(
                  "view",
                  {
                    styles: {
                      backgroundColor: "#fff",
                      padding: [49, 15, 40, 15],
                      display: "flex",
                      borderRadius: 16,
                      borderWidth: 1,
                      borderColor: "rgba(231, 227, 255, 0.92)",
                    },
                  },
                  [
                    c("image", {
                      styles: {
                        width: 160,
                        height: 148,
                      },
                      attrs: {
                        src: "https://img1.dxycdn.com/2020/1116/323/6398386778207187443-2.png",
                      },
                      on: {
                        load(info, img) {
                          console.log("logo", info, img);
                        },
                        error(error) {
                          console.log("logo", error);
                        },
                      },
                    }),
                    c(
                      "view",
                      {
                        styles: {
                          flex: 1,
                          paddingLeft: 30,
                        },
                      },
                      [
                        c(
                          "view",
                          {
                            styles: {
                              lineHeight: 54,
                              height: 54,
                            },
                          },
                          [
                            c(
                              "text",
                              {
                                styles: {
                                  lineHeight: 44,
                                  marginRight: 10,
                                  fontSize: 44,
                                  fontWeight: 700,
                                  color: "#fd5155",
                                },
                              },
                              `¥12`
                            ),
                          ]
                        ),
                        c(
                          "view",
                          {
                            styles: {
                              lineHeight: 30,
                              height: 30,
                              display: "flex",
                            },
                          },
                          [
                            c(
                              "view",
                              {
                                styles: {
                                  width: "auto",
                                  padding: [0, 12],
                                  lineHeight: 28,
                                  borderRadius: 15,
                                  borderColor: "#FD5155",
                                  borderWidth: 1,
                                  backgroundColor: "rgba(253, 98, 102, 0.08)",
                                  marginRight: 8,
                                },
                              },
                              [
                                c(
                                  "text",
                                  {
                                    styles: {
                                      fontSize: 20,
                                      fontWeight: 600,
                                      color: "#fd5155",
                                    },
                                  },
                                  `4人团`
                                ),
                              ]
                            ),
                            c(
                              "text",
                              {
                                styles: {
                                  fontSize: 22,
                                  color: "#9a9a9a",
                                  textDecoration: ["line-through"],
                                },
                              },
                              `¥111`
                            ),
                          ]
                        ),
                        c(
                          "view",
                          {
                            styles: {
                              padding: [0, 31],
                              backgroundColor: "#fd6266",
                              lineHeight: 54,
                              borderRadius: 26,
                              color: "#fff",
                              fontSize: 24,
                              marginTop: 28,
                              textAlign: "center",
                              width: "auto",
                            },
                          },
                          [c("text", {}, "点击查看")]
                        ),
                      ]
                    ),
                  ]
                ),
                c(
                  "view",
                  {
                    styles: {
                      color: "#594eac",
                      marginTop: 22,
                      textAlign: "center",
                      fontSize: 24,
                      opacity: 0.7,
                      lineHeight: 24,
                    },
                  },
                  [c("text", { styles: { lineHeight: 24 } }, "- copyright -")]
                ),
              ]
            ),
          ]);
        });
        node.mount(this.layer);
        console.log(node);
      });
  },
  ontouchstart(e) {
    this.layer.eventManager.touchstart(e.touches[0].x, e.touches[0].y);
  },
  ontouchmove(e) {
    this.layer.eventManager.touchmove(e.touches[0].x, e.touches[0].y);
  },
  ontouchend(e) {
    this.layer.eventManager.touchend(
      e.changedTouches[0].x,
      e.changedTouches[0].y
    );
  },
  onClick(e) {
    this.layer.eventManager.click(e.x, e.y);
  },
});

let layer = null;

function drawSimple(h) {
  return h(
    "view",
    {
      attrs: {
        src: "",
      },
      styles: {},
    },
    [
      h(
        "view",
        {
          styles: {
            margin: 10,
          },
        },
        [
          h(
            "view",
            {
              styles: {
                display: "flex",
                alignItems: "center",
              },
            },
            [
              h(
                "view",
                {
                  styles: {
                    flex: 1,
                    paddingLeft: 10,
                    borderLeftWidth: 10,
                    borderColor: "#8170ff",
                  },
                },
                [
                  h(
                    "text",
                    {
                      styles: {
                        fontSize: 30,
                        lineHeight: 30,
                      },
                    },
                    "Hello !"
                  ),
                ]
              ),
              h("view", { styles: { flex: 1, textAlign: "right" } }, [
                h("image", {
                  styles: {
                    height: 50,
                    width: 50,
                    display: "inline-block",
                  },
                  attrs: {
                    mode: "aspectFill",
                    src: "",
                  },
                }),
              ]),
            ]
          ),
        ]
      ),
    ]
  );
}
function drawListItem(h, tag) {
  return h(
    "view",
    {
      data: {
        tag,
      },
      styles: {
        borderBottomWidth: 1,
        borderColor: "#ccc",
        borderStyle: "solid",
        display: "flex",
        paddingTop: 5,
        paddingRight: 5,
        paddingBottom: 5,
        paddingLeft: 5,
        backgroundColor: "#f1f1f1",
        marginBottom: 10,
      },
      on: {
        click(e) {
          alert(e.currentTarget.options.data.tag);
        },
      },
    },
    [
      h(
        "view",
        {
          styles: {
            width: 50,
          },
        },
        [
          h("image", {
            attrs: {
              src: "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg",
            },
            styles: {
              borderRadius: 24,
              shadowBlur: 10,
              shadowColor: "#000",
            },
          }),
        ]
      ),
      h("view", { styles: { flex: 2, paddingLeft: 10 } }, [
        h("view", {}, [h("text", { styles: { fontSize: 16 } }, "开发指南")]),
        h(
          "view",
          {
            styles: {},
          },
          [
            h(
              "text",
              { styles: { fontSize: 12, color: "#666", maxLine: 2 } },
              "小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务"
            ),
            drawInlineBlock(h),
          ]
        ),
      ]),
    ]
  );
}
function drawButton(h, text = "text", options = {}) {
  return h(
    "view",
    Object.assign(
      {
        styles: {
          height: 20,
          backgroundColor: "#ff6c79",
          borderRadius: 10,
          borderColor: "#fff",
          margin: 2,
          display: "inline-block",
          paddingLeft: 10,
          paddingRight: 10,
          verticalAlign: "middle",
        },
        on: {
          click(e) {
            console.log(e);
          },
        },
      },
      options
    ),
    [
      h(
        "text",
        {
          styles: {
            lineHeight: 16,
            color: options.color || "#fff",
            textAlign: "center",
            fontSize: 11,
          },
        },
        text
      ),
    ]
  );
}
function drawBox(h) {
  return h(
    "view",
    {
      styles: {},
    },
    [
      h(
        "view",
        {
          styles: {
            display: "inline-block",
            width: 40,
            verticalAlign: "middle",
          },
        },
        [h("text", {}, "事事顺遂遂")]
      ),
      h(
        "view",
        {
          styles: {
            display: "inline-block",
            width: 40,
            verticalAlign: "top",
          },
        },
        [h("text", {}, "事事")]
      ),
      h(
        "view",
        {
          styles: {
            display: "inline-block",
            width: 40,
            verticalAlign: "bottom",
          },
        },
        [h("text", {}, "事事顺遂事事顺遂")]
      ),
    ]
  );
}
function drawInlineBlock(h) {
  let buttonList = [0, 0, 0, 0, 0, 0, 0].map((item, index) => {
    return h(
      "view",
      {
        styles: {
          height: 20,
          backgroundColor: "#ff6c79",
          borderRadius: 2,
          borderColor: "#fff",
          margin: 2,
          paddingLeft: 10,
          paddingRight: 10,
          display: "inline-block",
        },
      },
      [
        h(
          "text",
          {
            styles: {
              lineHeight: 16,
              color: "#fff",
              fontSize: 11,
            },
          },
          `查看${index}`
        ),
      ]
    );
  });
  return h(
    "view",
    {
      styles: {
        borderTopWidth: 0.5,
        borderColor: "#ccc",
        paddingTop: 4,
        marginTop: 4,
        textAlign: "right",
      },
    },
    [...buttonList]
  );
}
function drawCard(h) {
  return h(
    "view",
    {
      styles: {
        backgroundColor: "#ff6c79",
        margin: 10,
        padding: [10, 20],
        borderRadius: 6,
        borderWidth: 1,
        borderColor: "#ff6c79",
        borderStyle: "dash",
        shadowColor: "#666",
        shadowBlur: 20,
      },
    },
    [
      h("view", {}, [
        h(
          "text",
          {
            styles: { color: "#fff" },
          },
          "总资产(元)"
        ),
      ]),
      h("view", { styles: { display: "flex", justifyContent: "flex-start" } }, [
        h("view", { styles: { flex: 1 } }, [
          h(
            "text",
            { styles: { fontSize: 20, fontWeight: 700, color: "#Fff" } },
            "23.43"
          ),
        ]),
        h("view", { styles: { flex: 1, textAlign: "right" } }, [
          h(
            "view",
            {
              styles: {
                height: 20,
                backgroundColor: "#fff",
                borderRadius: 10,
                borderColor: "#fff",
                margin: 2,
                display: "inline-block",
                paddingLeft: 10,
                paddingRight: 10,
              },
              on: {
                click(e) {
                  console.log(e);
                },
              },
            },
            [
              h(
                "text",
                {
                  styles: {
                    lineHeight: 16,
                    color: "#ff6c79",
                    textAlign: "center",
                    fontSize: 11,
                  },
                },
                "我的信息"
              ),
            ]
          ),
        ]),
      ]),
      h("view", { styles: { lineHeight: 30 } }, [
        h(
          "text",
          {
            styles: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 20,
              verticalAlign: "middle",
            },
          },
          "最新收益0.00"
        ),
        h(
          "view",
          {
            styles: {
              display: "inline-block",
              marginLeft: 10,
              height: 16,
              borderRadius: 8,
              paddingLeft: 5,
              paddingRight: 5,
              backgroundColor: "#666",
              verticalAlign: "middle",
            },
          },
          [
            h(
              "text",
              { styles: { fontSize: 10, lineHeight: 16, color: "#fff" } },
              "赠送权益"
            ),
          ]
        ),
      ]),
      h(
        "view",
        {
          styles: {
            display: "flex",
            marginTop: 20,
            paddingTop: 20,
            borderTopWidth: 0.5,
            borderColor: "#fff",
            alignItems: "flex-end",
            color: "yellow",
          },
        },
        [
          h("view", { styles: { flex: 1 } }, [
            h("text", { styles: {} }, "风险评测"),
            h("text", { styles: {} }, "风险评测风险评测风险评测"),
          ]),
          h(
            "view",
            {
              styles: {
                flex: 1,
                textAlign: "center",
              },
            },
            [
              h(
                "text",
                { styles: { textAlign: "center", width: "100%" } },
                "我的定投"
              ),
              h("text", { styles: {} }, "风险评测"),
            ]
          ),
          h(
            "view",
            {
              styles: {
                flex: 1,
                textAlign: "center",
                verticalAlign: "middle",
              },
            },
            [
              h("text", { styles: { textAlign: "center" } }, "优惠券"),
              h("text", { styles: {} }, "风险评测"),
            ]
          ),
        ]
      ),
    ]
  );
}
function drawScrollView(h) {
  return h(
    "scrollview",
    {
      styles: { direction: "y", height: 200 },
    },
    [
      drawListItem(h, "list1"),
      drawListItem(h, "list2"),
      drawListItem(h, "list3"),
      drawListItem(h, "list4"),
    ]
  );
}
function drawScrollViewX(h) {
  return h(
    "scrollview",
    {
      styles: {
        direction: "x",
        whiteSpace: "nowrap",
      },
    },
    [0, 0, 0, 0, 0, 0, 0, 0, 0].map((item, index) => {
      return h(
        "view",
        {
          styles: {
            display: "inline-block",
            padding: 10,
          },
        },
        [h("text", {}, "导航" + index)]
      );
    })
  );
}
function drawAbsolute(h) {
  return h(
    "view",
    { styles: { position: "absolute", top: 10, left: 10, zIndex: 10 } },
    [drawButton(h, "Absolute")]
  );
}

function Dialog(h, options) {
  return h(
    "view",
    {
      attrs: { className: "dialog" },
      styles: {
        position: "absolute",
        top: 0,
        left: 0,
        width: window.innerWidth,
        height: window.innerHeight,
        backgroundColor: "rgba(0,0,0,0.5)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      },
    },
    [
      h(
        "view",
        {
          styles: {
            width: 300,
            padding: 20,
            borderRadius: 4,
            backgroundColor: "#fff",
          },
        },
        [
          h(
            "view",
            {
              styles: {
                textAlign: "center",
                fontWeight: "bold",
                fontSize: 20,
                borderBottomWidth: 0.5,
                borderColor: "#ccc",
              },
            },
            [h("text", {}, options.title || "Notice")]
          ),
          h("view", { styles: { paddingTop: 20, color: "#666" } }, [
            h("text", {}, options.content || ""),
          ]),
        ]
      ),
    ]
  );
}

function setLayer(_layer) {
  layer = _layer;
}
function ontouchstart(e) {
  e.preventDefault();
  layer.eventManager.touchstart(e.touches[0].pageX, e.touches[0].pageY);
}
function ontouchmove(e) {
  e.preventDefault();
  layer.eventManager.touchmove(e.touches[0].pageX, e.touches[0].pageY);
}
function ontouchend(e) {
  e.preventDefault();
  layer.eventManager.touchend(
    e.changedTouches[0].pageX,
    e.changedTouches[0].pageY
  );
}
function onClick(e) {
  e.preventDefault();
  layer.eventManager.click(e.pageX, e.pageY);
}
